<!--
 <script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, onMounted, ref } from 'vue';
// import { UUID } from 'uuidjs';
import { getBoxLabelInfomes } from '@/service/api/modules/collection-management/lable-box.ts';
const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  moduleNo: null,
  lotId: null,
  pnlId: null,
  time: null
});
const defaultExpandedRowKeys = ref([]);
const loading = ref(false);
const dataList = ref([]);
const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 5,
    placeholder: '请输入生产型号',
    showTime: true
  },
  {
    type: 'input',
    key: 'lotNo',
    label: 'LOT号',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 5,
    placeholder: '请输入LOT号',
    showTime: true
  },
  {
    type: 'input',
    key: 'packNo',
    label: '箱标签',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 5,
    placeholder: '请输入箱标签',
    showTime: true
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 5
    // showTime: true // 显示时分秒选择
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});


// // 展开处理
// const expandList = async (expanded, record) => {
//   if (expanded) {
//     const code = record.groupCode;
//     const res = await getBoxLabelInfomes(code);
//     // 打印数据
//     console.log(res);
//     expandedRowKeys.value.push(record.id);
//   } else {
//     const index = expandedRowKeys.value.indexOf(record.id);
//     expandedRowKeys.value.splice(index, 1);
//   }
// };

// // 展开图标
// const customExpandIcon = props => {
//   if (props.record && props.record.packNo !== undefined) {
//     return props.expanded ? (
//       <a-icon type="minus-square" onClick={e => props.onExpand(props.record, e)} style={{ color: 'rgba(0,0,0,0.4)' }} />
//     ) : (
//       <a-icon type="plus-square" onClick={e => props.onExpand(props.record, e)} style={{ color: 'rgba(0,0,0,0.4)' }} />
//     );
//   }
//   return null;
// };
// 表格数据
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    fixed: 'left',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '生产型号',
    align: 'center',
    width: 200,
    checked: true,
    ellipsis: true
  },
  {
    title: '生产型号',
    key: 'prodNo',
    minWidth: 200,
    ellipsis: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: 'lot卡号',
    align: 'center',
    width: 180,
    checked: true,
    ellipsis: true
  },
  {
    key: 'custProdNo',
    dataIndex: 'custProdNo',
    title: '客户型号',
    align: 'center',
    width: 300,
    checked: true,
    ellipsis: true
  },
  {
    key: 'packNo',
    dataIndex: 'packNo',
    title: '箱标签',
    align: 'center',
    width: 220,
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '出货数量',
    align: 'center',
    // width: 150,
    checked: true,
    ellipsis: true
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '单位',
    align: 'center',
    // width: 150,
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '出货人',
    align: 'center',
    checked: true,
    ellipsis: true,
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: '出货时间',
    align: 'center',
    // width: 150,
    checked: true,
    ellipsis: true
  }
];

// 从接口getBoxLabelInfomes获取createBy数据

// search
function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      time: null
    };
    search();
  });
}
</script>

<template>
  <div
    class="code-whitelist-page jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      :auto-generate-uuid="true"
      :scroll="{ x: 'auto', y: 'auto' }"
      is-init-get-data
      url="rcerp/passStationRecord/selectBoxFollow"
      :default-expanded-row-keys="defaultExpandedRowKeys"
      row-key="id"
      :default-expand-all-rows="true"
      :loading="loading"
      :expand-icon="customExpandIcon"
      @expand="expandList"
    ></Table>
  </div>
</template>

<style lang="scss" scoped></style>
-->

<!-- -----------------------------------------------以上不删除，以下为代码--------------------------------------------------------------------------- -->
<script setup lang="jsx">
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { getBoxLabelInfomes } from '@/service/api/modules/collection-management/lable-box.ts';
import { get } from '@/service/api/api';
import Search from './modulles/Search.vue';
const tableRef = ref(null);
const searchParams = ref({
  prodNo: null,
  lotNo: null,
  packNo: null,
  // time: null
  // 默认传今天的日期
  time: [dayjs().startOf('day').format('YYYY-MM-DD'), dayjs().endOf('day').format('YYYY-MM-DD')]
});
const pagination = reactive({
  current: 1,
  pageSize: 200,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});

const commonSearchRef = ref(null);

const columns = ref([
  // {
  //   key: 'dataIndex',
  //   dataIndex: 'dataIndex',
  //   title: '序号',
  //   fixed: 'left',
  //   width: 70,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">生产型号</span>,
    width: 160,
    align: 'center',

    checked: true,
    ellipsis: true,
    className: 'data-cell'
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">lot卡号</span>,
    align: 'center',
    width: 150,
    checked: true,
    ellipsis: true,
    className: 'data-cell'
  },
  {
    key: 'custProdNo',
    dataIndex: 'custProdNo',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">客户型号</span>,
    align: 'center',
    width: 400,
    checked: true,
    ellipsis: true,
    className: 'data-cell-many'
  },
  {
    key: 'packNo',
    dataIndex: 'packNo',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">箱标签</span>,
    align: 'center',
    width: 200,
    checked: true,
    ellipsis: true,
    className: 'data-cell'
    // 默认返回箱标签icon图标
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">出货数量</span>,
    align: 'center',
    width: 100,
    checked: true,
    ellipsis: true,
    className: 'data-cell-sun'
    // 出货数量计算为接口getBoxLabelInfomes返回的children中的qty的和
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">( 单位 )</span>,
    align: 'center',
    width: 120,
    checked: true,
    ellipsis: true,
    className: 'data-cell-many'
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">出货人</span>,
    align: 'center',
    checked: true,
    width: 120,
    ellipsis: true,
    className: 'data-cell-many'
  },
  {
    key: 'updateDate',
    dataIndex: 'updateDate',
    title: <span style="color: #19418d; font-weight: bold; font-size: 16px;font-family: 黑体;">出货时间</span>,
    align: 'center',
    width: 180,
    checked: true,
    ellipsis: true,
    className: 'data-cell-many'
  }
]);

const tableData = ref([]);
const loading = ref(false);
const defaultExpandedRowKeys = ref([]);

function getData() {
  loading.value = true;

  const params = {};
  if (searchParams.value.time?.[0]) {
    params.startTime = searchParams.value.time[0];
    params.endTime = searchParams.value.time[1];
  }
  get('rcerp/passStationRecord/selectBoxFollow', {
    pageSize: pagination.pageSize,
    pageNum: pagination.current,
    prodNo: searchParams.value.prodNo,
    lotNo: searchParams.value.lotNo,
    packNo: searchParams.value.packNo,
    time: searchParams.value.time,
    ...params
  })
    .then(({ data, error }) => {
      console.log('data', data);
      if (!error) {
        tableData.value = data.list;
        pagination.total = data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
getData();
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <Search v-model:model="searchParams" @reset="getData()" @search="getData()" />
    <ACard
      :bordered="false"
      :body-style="{ flex: 1, overflow: 'hidden' }"
      class="table-card flex-col-stretch sm:flex-1-hidden card-wrapper"
    >
      <template #extra>
        <TableColumnSetting v-model:columns="columns" />
      </template>

      <ATable
        ref="tableRef"
        :columns="columns"
        :data-source="tableData"
        size="small"
        :loading="loading"
        :default-expand-all-rows="true"
        :pagination="pagination"
        row-key="uuid"
        :scroll="{ x: 'auto', y: 'auto' }"
        class="h-full"
        :row-class-name="(record, index) => 'custom-row'"
        :expand-icon-column-index="3"
      />
    </ACard>
  </div>
</template>

<style>
.custom-row {
  font-size: 15px;
  height: 32px;
  line-height: 32px;
}
.data-cell {
  font-size: 15px;
  font-weight: bold;
  color: #19418d;
}

.data-cell-sun {
  font-size: 15px;
  font-weight: bold;
}

.data-cell-many {
  font-size: 15px;
  font-family: 黑体;
  /* font-weight: bold; */
  /* color: #19418d; */
}

/* 展开图标 */
.ant-table-row-expand-icon {
  left: 110px;
  color: #19418d;
}

/* v-if="tableData.length > 0" 不加判断:default-expand-all-rows="true" 会不生效 */
</style>
